*{
margin: 0;
padding: 0;
	}
#wrap{
	width:1010px;
	height:1200px;
	
	/*background-color: #F5F5F5;*/
}
li{
	list-style: none;
}
#box{
	width:998px;
	height:1280px;
	/*border: 1px solid rgba(0,0,0,0.1);*/
	/*margin:0 auto;*/
	background-color: white;
}
#header{
	width: 1000px;
	height: 40px;
	/**/
	color: #ff3333;
	margin-top: 40px;
}
.line{
	/*width: inherit;*/
	height: 1px;
	background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  	background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
 	 background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  	background: linear-gradient(to right, red , blue); /* 标准的语法 */
  	font-size: 30px;
  	color:yellow;
}
.leftline{
	margin-top: 25px;
	
	border-radius: 100%;
}
.leftline{
	animation:toLong 5s linear infinite alternate;
	-webkit-animation:toLong 5s linear  infinite alternate;
}
@keyframes toLong {
	0%{
		width:0px;
	}
	100%{
		width:480px;
	}
}
/*.rightline{
	margin-top: -20px;
	margin-left: 620px;*/
	/*width:480px;
	border-radius:300%;
}*/
.through{
	float: left;
}
#con{
	width: 1000px;
	height: 70px;
	box-shadow: 0 2px 2px 1px grey;
	margin-top:20px; 
	color: #ff9999;
	margin-left: 5px;
}
#con p {
	
}
h1{
	font-size:50px;margin-top:30px; text-align:center;
	color: #ff6666;
}
#addrname,#view1{
	float: left;
}
#viewBox{
	height: 940px;
	width: 1010px;
}
#viewWrap{
	width: 1000px;
	height: 680px;
	border: 1px solid white;;
	margin-top: -10px;
}
#view1{
	width: 840px;
	height:950px;
	border: 1px solid white;
	margin-top: 33px;
	margin-left: 0px;
}
.viewboxs{
	float: left;
	color: orange;
}
#view1LeftBox{
	width: 10px;
	height: 905px;
	border: 1px solid white;
	
	background-color: rgba(255,102,0,0.6);
}
#view1RightBox{
	width: 810px;
	height: 940px;
	border: 1px solid white;
}
#view1RightBox  li{
	font-size: 10px;
	height:15px;
	box-shadow: 0 0 1px 1px pink;
	margin-bottom: 19.1px;
}
#addrname{
	font-size: 12px;
	margin-top: 33px;
	width: 115px;
	height: 918px;
	margin-bottom: 10px;
	margin-left: 20px;
}
button{
	width: 100px;
	height: 30px;
	background: #FFA3CE;
	margin-top: -100px;
	margin-left: 850px;
	border-radius: 30% 30%;
}
#addrname  li{
	width: 110px;
	height: 17px;
	margin-bottom: 15px;
	margin-left: 5px;
	text-align: center;
	border: 1px solid white;
	color: orange;
}

#view1RightBox li:nth-child(even){  /*偶数*/
	
	background: -webkit-linear-gradient(left, rgba(255,0,102,0.5) , rgba(255,153,204,0.8)); /* Safari 5.1 - 6.0 */
  	background: -o-linear-gradient(right, rgba(255,0,102,0.5) , rgba(255,153,204,0.8)); /* Opera 11.1 - 12.0 */
 	 background: -moz-linear-gradient(right,  rgba(255,0,102,0.5) , rgba(255,153,204,0.8)); /* Firefox 3.6 - 15 */
  	background: linear-gradient(to right, rgba(255,0,102,0.5) , rgba(255,153,204,0.8)); /* 标准的语法 */
}
#view1RightBox li:nth-child(odd){/*奇数*/
	background: -webkit-linear-gradient(left, rgba(255,255,51,0.7) , rgba(255,102,102,0.8)); /* Safari 5.1 - 6.0 */
  	background: -o-linear-gradient(right, rgba(255,255,51,0.7) , rgba(255,102,102,0.8)); /* Opera 11.1 - 12.0 */
 	 background: -moz-linear-gradient(right, rgba(255,255,51,0.7) , rgba(255,102,102,0.8)); /* Firefox 3.6 - 15 */
  	background: linear-gradient(to right, rgba(255,255,51,0.7) , rgba(255,102,102,0.8)); /* 标准的语法 */
}
#view1RightBox li:nth-child(1){
	width:412px;
}
#view1RightBox li:nth-child(2){
	width: 118px;
}
#view1RightBox li:nth-child(3){
	width:344px ;
}
#view1RightBox li:nth-child(4){
	width: 474px;
}
#view1RightBox li:nth-child(5){
	width: 229px;
}
#view1RightBox li:nth-child(6){
	width: 800px;
}
#view1RightBox li:nth-child(7){
	width: 498px;
}
#view1RightBox li:nth-child(8){
	width:109px ;
}
#view1RightBox li:nth-child(9){
	width: 251px;
}
#view1RightBox li:nth-child(10){
	width: 401px;
}
#view1RightBox li:nth-child(11){
	width: 572px;
}
#view1RightBox li:nth-child(12){
	width: 95px;
}
#view1RightBox li:nth-child(13){
	width: 262px;
}
#view1RightBox li:nth-child(14){
	width: 32px;
}
#view1RightBox li:nth-child(15){
	width: 416px;
}
#view1RightBox li:nth-child(16){
	width: 327px;
}
#view1RightBox li:nth-child(17){
	width: 18px;
}
#view1RightBox li:nth-child(18){
	width: 34px;
}
#view1RightBox li:nth-child(19){
	width: 57px;
}
#view1RightBox li:nth-child(20){
	width: 452px;
}
#view1RightBox li:nth-child(21){
	width: 300px;
}
#view1RightBox li:nth-child(22){
	width: 28px;
}
#view1RightBox li:nth-child(23){
	width: 535px;
}
#view1RightBox li:nth-child(24){
	width: 374px;
}
#view1RightBox li:nth-child(25){
	width: 15px;
}
#view1RightBox li:nth-child(26){
	width: 51px;
}
#view1RightBox li:nth-child(27){
	width: 45px;
}
